<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta content="text/html;charset=utf-8"></meta>
    <title>角色分配</title>
    <link rel="stylesheet" href="/static/js/common/bootstrap/css/bootstrap.min.css"></link>
    <link rel="stylesheet" href="/static/css/base.css"></link>
    <script src="/static/js/common/jquery/jquery-3.2.1.min.js"></script>
    <script src="/static/js/base/base.js"></script>
    <script>
        // 复选框全选/取消全选
        function selectAllBox(data) {
            // alert($(data).attr("checked"));
            if($(data).attr("checked")=='checked'){
                //取消全选
                $("input:checkbox").each(function (index, target) {
                    $(target).attr("checked", false);
                });
            }else{
                //全选
                $("input:checkbox").each(function (index, target) {
                    $(target).attr("checked", true);
                });
            }
        }


        //记录翻页
        function listRecord(data) {
            var roleName = $("#queryRoleName").text();
            var pageSize = "${listResult.pageSize}";
            var pageNo = $(data).text();
            var requestData = "?pageNo=" + pageNo + "&pageSize=" + pageSize;
            if(roleName){
                requestData = requestData + "&roleName=" + roleName;
            }
            <#--alert("${basePath}" + "/user/allotRoles/pageList" + requestData);-->
            $.ajax({
                type: "GET",
                url: "${basePath}" + "/role/allotPermissions/pageList" + requestData,
                dataType: "html",
                success: function(result){
                    //清空原记录
                    $("#allotPermission_table").html(result);
                },
                error: function (result) {
                    alert("error:"+result.responseText);
                }
            });
        }

        //资源分配页弹出
        function skipAddRoles(data) {
            var tdList = $(data).parent().parent().children();
            var roleId = tdList.eq(0).text();
            var url = "${basePath}" + "/permission/allotPermissions/list/?pageFlag=false&roleId=" + roleId;
            // alert(111);
            $("#roleId").attr("value", roleId);
            $("#myModal").modal("show");
            //角色列表
            $.ajax({
                type: "GET",
                url: url,
                dataType: "html",
                success: function(result){
                    // alert(result);
                    // $('#btn').unbind("click");
                    // $(".rolePermission_table").load(location.href+" .rolePermission_table");
                    var dataResult = JSON.parse(result);
                    var resultList = dataResult.listResult.list;
                    $("#tbody_allot_permission").empty();
                    $.each(resultList, function (index, target) {
                        if (target.checkFlag == 0) {
                            $("#tbody_allot_permission").append("<tr>\n" +
                                    "                                    <td>\n" +
                                    "                                        <input id=\"checkbox_" + target.id + "\" type=\"checkbox\" value=\"" + target.id + "\"></td>\n" +
                                    "                                    <td>" + target.permissionName + "</td>\n" +
                                    "                                    <td>" + target.permissionPath + "</td>\n" +
                                    "                                    <td>" + target.description + "</td>\n" +
                                    "                                </tr>");
                        } else {
                            $("#tbody_allot_permission").append("<tr>\n" +
                                    "                                    <td>\n" +
                                    "                                        <input checked=\"checked\" id=\"checkbox_" + target.id + "\" type=\"checkbox\" value=\"" + target.id + "\"></td>\n" +
                                    "                                    <td>" + target.permissionName + "</td>\n" +
                                    "                                    <td>" + target.permissionPath + "</td>\n" +
                                    "                                    <td>" + target.description + "</td>\n" +
                                    "                                </tr>");

                        }
                    });
                },
                error: function (result) {
                    alert("error:"+result.responseText);
                }

            });
        }

        //模态窗提交
        function commitModal() {
            var roleId = $("#roleId").val();
            var permissionIdArray = new Array();
            var checkedList = $("input[type='checkbox']:checked");

            $.each(checkedList, function (index, target) {
                permissionIdArray[index] = Number($(target).attr('value'));
            });
            var postData = {				//店铺装修信息初始化
                "permissionIdList": permissionIdArray,
                "roleId":roleId
            };
            // alert(JSON.stringify(postData));
            $.ajax({
                type: "POST",
                url: "${basePath}" + "/role/allotPermissions/addPermission",
                data: JSON.stringify(postData),
                dataType: "json",
                contentType : "application/json",
                success: function (resultData) {
                    // alert(resultData);
                    $('#myModal').modal('hide');

                    //视图展示处理
                },
                error: function(data) {
                    alert("error:"+data.responseText);
                }
            });
        }

        //用户查询
        function queryRole(data) {
            var pageSize = "${listResult.pageSize}";
            var pageNo = 1;
            var requestData = "?pageNo=" + pageNo + "&pageSize=" + pageSize;
            var roleName = $("#queryRoleName").val();
            if(roleName){
                requestData = requestData + "&roleName=" + roleName
            }
            $.ajax({
                type: "GET",
                url: "${basePath}" + "/role/allotPermissions/pageList" + requestData,
                dataType: "html",
                success: function(result){
                    $("#allotPermission_table").html(result);
                },
                error: function (result) {
                    alert("error:"+result.responseText);
                }

            });
        }

    </script>
</head>
<body>
 <@_top.top 1/>
<div class="container" style="padding-bottom: 15px;min-height: 300px; padding-top: 60px;">
    <div class="row">
        <@_left.role 4/>
        <div id="allotPermission_table">
            <#include "allot_permission_table.ftl">
        </div>
    </div>
</div>

<#--<iframe class="col-md-10" id="myIframe" src="" frameborder="0"></iframe>-->
<div class="modal fade" id="myModal" style="padding-top: 150px" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    角色分配
                </h4>
            </div>
            <div class="modal-body">
                <form id="from_addrole" class="form-horizontal" role="form">
                    <div class="form-group hidden">
                        <label for="firstname" class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="roleId" name="roleId" >
                        </div>
                    </div>
                    <div class="form-group">
                        <table class="table  table-hover">
                            <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" id="checkRolesAll" value="" onchange="selectAllBox(this)">全选
                                </th>
                                <th>资源名称</th>
                                <th>资源路径</th>
                                <th>资源描述</th>
                            </tr>
                            </thead>
                            <tbody id="tbody_allot_permission">
                            <#--&lt;#&ndash;<div id="rolePermission_table">&ndash;&gt;-->
                                <#--<#list listResult.list as sysPermission>-->
                                <#--<tr>-->
                                    <#--<td>-->
                                        <#--<input id="checkbox_" type="checkbox" value="id"></td>-->
                                    <#--<td>A</td>-->
                                    <#--<td>A</td>-->
                                    <#--<td>A</td>-->
                                <#--</tr>-->
                                <#--</#list>-->
                            <#--&lt;#&ndash;</div>&ndash;&gt;-->
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="modalCancel" onclick="function close() {
                            $('#myModal').modal('hide');
                        }" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" id="allotRoleSave" onclick="commitModal(this)" class="btn btn-primary">
                    保存
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script src="/static/js/common/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>